<template>
  <div class="address-warpper">
    <!-- <div v-if="addressList&&addressList.length>0" class="address-box clearfix">
      <div class="middle clearfix" v-for="address in addressList">
        <div class="section-line">收货人：{{address.personName}}
          <div class="phone">{{address.phone}}</div>
        </div>
        <div class="address-line">收货地址：<span>{{address.address}}湖北省武汉市洪山区光谷软件园A栋1室巴拉巴拉巴拉巴拉巴拉巴拉</span></div>
        <div class="action-line">
            <div class="box flex">
                <a class="flex" href="javascript:;" @click="editAddress(address)">
                  <i class="edit"></i>
                  <span>编辑</span>
                </a>
                <a class="flex" href="javascript:;" @click="deleteAddress(address)">
                  <i class="del"></i>
                  <span>删除</span>
                </a>
            </div>

        </div>
      </div>
    </div> -->
    <group>
      <x-input title="收货人:" show-clear v-model="adresslist.personName"></x-input>
      <x-input title="联系电话:" show-clear type="number" is-type="china-mobile" v-model="adresslist.phone"></x-input>
      <x-address title="省市区" label-width="70px" placeholder="请选择" :list="addressData" v-model="areaCodetext" value-text-align="left" ></x-address>
      <x-textarea placeholder="请输入详细的地址（精确到门牌号）" v-model="adresslist.address" ></x-textarea>
      <div class="fengeBar"></div>
      <x-switch title="设为默认地址" :value-map="['0', '1']"  v-model="adresslist.status"></x-switch>
    </group>
    <div class="add-box" @click="handleConfirm">
      <span>{{comfirmText}}</span>
    </div>
  </div>
</template>

<script>
  import axios from '@/api/request'
  import { Tab,XSwitch,Group,XAddress,XInput,XTextarea,ChinaAddressV4Data,Value2nameFilter as value2name } from "vux";

  export default {
    name: '',
    components: {
      Group,
      XAddress,
      XInput,
      XTextarea,
      XSwitch
    },
    data () {
      return {
        addressData: ChinaAddressV4Data,
        areaCodetext:[],
        title: '编辑地址',
        comfirmText: '保存',
        adresslist:{
              phone:'',
              personName:'',
              areaCode:[],
              address:'',
              status:'0',
              userId:this.$route.query.userId
           }
      }
    },
    created(){
    },
    mounted(){
      this.getadresslist()
    },
    methods:{
      getadresslist(){
        if(this.$route.query.adressId){    //获取地址
           var self=this
           axios('/device/userAddress/get',"post",{id:this.$route.query.adressId}).then(res=>{
            if(res.data.code==1000){
                  console.log(res)
                  self.adresslist={
                    id:res.data.data.id,
                    phone:res.data.data.phone,
                    personName:res.data.data.name,
                    areaCode:res.data.data.areaCode,
                    address:res.data.data.address,
                    status:res.data.data.status,
                    userId:this.$route.query.userId
                  }
            }
           })
        }
      },
      handleConfirm(){
        this.adresslist.areaCode=this.areaCodetext[2]
        if(this.$route.query.adressId){    //添加地址
          
          console.log(this.adresslist)
          var self=this
          axios('/device/userAddress/create',"post",this.adresslist).then(res=>{
            if(res.data.code==1000){
               this.$vux.toast.text('添加成功')
               self.$router.push({ path:'/addressManage', query: { userId: self.$route.query.userId }})
            }
           })
          }else{                       //修改地址
             axios('/device/userAddress/update/'+this.$route.query.adressId,"post",this.adresslist).then(res=>{
            if(res.data.code==1000){
               this.$vux.toast.text('修改地址成功')
               self.$router.push({ path:'/addressManage', query: { userId: self.$route.query.userId }})
            }
           })
        }
      },

    }

  };
</script>

<style >
    body{
        position: absolute;
        left: 0;
        top: 0;
        /*background: rgb(244,244,244);*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .vux-label{
        font-size: 14px;
        color: #444;
    }
    .address-warpper .weui-cells{
      margin-top: 12px;
    }
</style>
<style lang="less" scoped>
  .address-warpper{
    height: 100%;
    box-sizing: border-box;
    // padding-top: 20rem/75;
    background: rgb(244,244,244);
    div.weui-cells{
      margin-top: 25rem/75;
    }
    div.vux-x-switch.weui-cell.weui-cell_switch:before{
      border-top: 0;
    }
    .fengeBar{
      height: 12px;
      background: rgb(244,244,244);
    }
    .add-box{
      margin: 0 50rem/75;
      margin-top: 60rem/75;
      height: 90rem/75;
      line-height: 90rem/75;
      border-radius: 6px;
      background: rgb(255,218,68);
      color: #000;
      text-align: center;
      font-size: 18px;
    }
  }

</style>

<style>
  .address-warpper .weui-cells{
    margin-top: 25rem/75;
  }
  .vux-label{
    font-size: 0.32rem;
  }

</style>
